<!--
  -    Copyright (c) 2018-2025, cycas-ui All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the cycas-ui_cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: cycas-ui (cycas-ui@gmail.com)
  -->

<template>
  <div>
    <basic-container>
      <avue-crud :option="option"
                   :page.sync="page"
                   :data="data"
                   :table-loading="loading"
                   v-model="form"
                   @on-load="onload"
                   @search-change="searchChange"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   @refresh-change="refreshChange"
                   @row-save="add"
                   @row-update="update"
      >
        <template slot-scope="scope" slot="menu">
            <el-button icon="el-icon-check" :size="scope.size" :type="scope.type" @click="handleMenu(scope.row)">
              授权菜单
            </el-button>
          </template>
        </avue-crud>
    </basic-container>
    <el-dialog :visible.sync="menuTreeVisible" :close-on-click-modal="false" title="租户权限配置">
      <div class="dialog-main-tree">
        <el-tree
          ref="menuTree"
          :data="treeData"
          :default-checked-keys="checkedKeys"
          :check-strictly="false"
          :props="defaultProps"
          :filter-node-method="filterNode"
          class="filter-tree"
          node-key="id"
          highlight-current
          show-checkbox
          default-expand-all/>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="updatePermession()">更新
        </el-button>
        <el-button
          type="default"
          @click="cancel()">取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {resolveAllEunuchNodeId} from "@/util/util";
import {create, modify, queryPage} from "@/api/sys/tenant";
import {allMenuTree} from "@/api/sys/menu";
import {queryByTenantId, saveTenantMenu} from "@/api/sys/tenantMenu";


export default {
  data() {
    return {
      menuTreeVisible: false,
      checkedKeys: [],
      treeData: [],
      defaultProps: {
        label: 'name',
        value: 'id'
      },
      tenantId: undefined,
      searchForm:{},
      form: {},
      data: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 5, // 每页显示多少条,
        pageSizes: [5, 10, 20, 30, 50],
        isAsc: false //是否倒序
      },
      loading: false,
      option: {
        border: false,
        index: true,
        indexLabel: '序号',
        stripe: true,
        menuWidth:160,
        menuAlign:'center',
        menuHeaderAlign:'center',
        searchMenuSpan: 6,
        align: 'center',
        addBtn: true,
        editBtn: true,
        delBtn: false,
        height: '290px',//表格高度
        column: [{
          label: '租户名称',
          prop: 'tenantName',
          // searchslot:true,
          search: true,
          maxlength: 18,
          width: 160
        },{
          label: '管理账户',
          prop: 'username',
          search: false,
          maxlength: 18,
          width: 100,
          addDisplay: true,
          editDisplay: false
        }, {
          label: '租户编码',
          prop: 'tenantCode',
          addDisplay: false,
          editDisplay: false
        }, {
          label: '租户状态',
          prop: 'status',
          type: 'radio',
          border: false,
          addDisplay: true,
          editDisplay: true,
          dicData: [{
            label: '正常',
            value: 0
          }, {
            label: '解约',
            value: 1
          }]
        }, {
          label: '租金(元)',
          prop: 'fee',
          maxlength: 8
        }, {
          label: '联系人',
          prop: 'contact',
          maxlength: 18
        }, {
          label: '手机号',
          prop: 'contactPhone',
          maxlength: 11,
          width: 100
        }, {
          label: '联系地址',
          prop: 'address',
          maxlength: 128,
          span: 24
        }, {
          label: '起始时间',
          prop: 'effectBeginTime',
          type: 'date',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd 00:00:00',
          width: 100
        }, {
          label: '结束时间',
          prop: 'effectEndTime',
          type: 'date',
          format: 'yyyy-MM-dd',
          valueFormat: 'yyyy-MM-dd 00:00:00',
          width: 100
        }]
      }
    }
  },
  methods: {
    onload(page) {
      this.loading = true;
      queryPage(Object.assign({
        currentPage: page.currentPage,
        pageSize: page.pageSize
      }, this.searchForm)).then(response => {
        this.data = response.data.data.list;
        this.page.total = parseInt(response.data.data.total);
        this.loading = false;
      });
    },
    searchChange(form, done) {
      this.page.currentPage = 1
      this.searchForm = form;
      this.onload(this.page);
      done()
    },
    refreshChange() {
      this.onload(this.page)
    },
    sizeChange(pageSize) {
      this.page.currentPage = 1
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    add(row, done, loading) {
      create(this.form).then(() => {
        this.onload(this.page);
        done();
        this.$notify.success('创建成功')
      }).catch(() => {
        loading();
      });
    },
    update(row, done, loading) {
      modify(this.form).then(() => {
        this.onload(this.page);
        done();
        this.$notify.success('修改成功')
      }).catch(() => {
        loading();
      });
    },
    handleMenu(row) {
      queryByTenantId(row.tenantId).then(response => {
          const checkedIds = [];
          response.data.data.forEach(function(element) {
            checkedIds.push(element.menuId)
          });
          this.checkedKeys = checkedIds
          return allMenuTree()
      }).then(response => {
        this.treeData = response.data.data
        // 解析出所有的太监节点
        this.checkedKeys = resolveAllEunuchNodeId(this.treeData, this.checkedKeys, [])
        this.menuTreeVisible = true
        this.tenantId = row.tenantId
      })
    },
    updatePermession() {
      this.menuIds = this.$refs.menuTree.getCheckedKeys()
      saveTenantMenu({"tenantId":this.tenantId, "menuIds": this.menuIds}).then(() => {
        this.menuTreeVisible = false
        this.$notify.success('修改成功')
      })
    },
    cancel() {
      this.menuTreeVisible = false;
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }
  }
}
</script>


